<template>
  <div class="article-container">
      <!-- 1、面包屑导航+表单 -->
      <!-- 使用elementUI的card卡片 -->
      <!-- 卡片上部分--面包屑导航 -->
      <!-- 卡片下部分--表单区域 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <BreadCard>内容管理</BreadCard>
          <!-- 父子传参可以实现文字的不同显示
          插槽也可以实现 把里面的"内容管理"传个子组件的默认插槽
          类似于双标签的内容这种方式是插槽 可以在里面加a标签 button按钮
          类似于传递过去一个双标签容器 比prop灵活-->
        </div>
        <el-form ref="form" :model="form" label-width="80px">
          <!-- 状态组件的封装 -->
          <status v-model="form.status" />
          <!-- v-model是:value 与 @input=""监听事件的组合的语法糖形式 -->
          <!-- 频道公共组件
          v-model ==@input :value -->
          <el-form-item label="频道">
            <channel v-model="channelId"></channel>
          </el-form-item>
          <el-form-item label="日期">
            <el-col :span="11">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="hDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="isloading" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 2、表格 -->
      <!-- 表格 el-table:data属性,用来提供数据源
        el-table-column
          prop:要对data中的属性对应
          label:要对标题对应
      -->
      <el-card style="margin-top:20px">
        <div slot="header" class="clearfix">
          根据筛选条件查询到{{list.total_count}}条数据,当前是{{list.page}}页：
        </div>
        <el-table
          v-loading="isloading"
          :data="list.results"
          style="width: 100%">
          <!-- 自定义列 v-loading="isloading"控制显示
          不需要设置prop  2、slot-scope="scope"用来指定当前行
          的信息 scope.row表示当前行数据 -->
          <el-table-column label="封面">
            <template slot-scope="scope">
              <!-- 图片组件 lazy懒加载效果-->
              <div class="block">
              <!-- 自定义列 图片组件 懒加载 占位符-->
                <el-image :src="scope.row.cover.images[0]" style="width:110px;height:110px" lazy>
                  <div slot="error" class="image-slot"><i class="el-icon-picture-outline" style="font-size:110px"></i></div>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <!-- 修改状态和操作列 tag标签 v-if v-else-if -->
              <!-- 表格操作区 饿了么按钮区-->
              <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
              <el-tag v-else-if="scope.row.status===1">待审核</el-tag>
              <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
              <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
              <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="pubdate" label="发布时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"
                @click="handleEdit(scope.$index, scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 数据分页 -->
        <el-pagination
          v-show="list.total_count>10"
          style="margin-top:20px"
          background
          @size-change="hSizeChange"
          @current-change="hPageChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 40, 50]"
          :current-page="list.page"
          :total="list.total_count">
        </el-pagination>
      </el-card>
      <!-- 怎么做筛选 -->
      <!-- 日期筛选 日期组件 -->
      <!-- 状态筛选 label绑定 -->
      <!-- 公共频道组件 name值可以在调试工具中快速找到-->
      <!-- 父组件在子组件实现v-model效果 获得子组件中用户选中的效果 -->
  </div>
</template>

<script>
import Channel from '@/components/channel.vue'
import BreadCard from '@/components/BreadCard.vue'
import Status from './components/status.vue'
export default {
  components: {
    Channel,
    Status,
    BreadCard
  },
  data () {
    return {
      isloading: false, // 加载控制变量
      channelId: null, // 接收的频道组件数据
      hDate: '', // 时间日期
      list: {}, // 接收返回的数据对象
      reqObj: {
        per_page: null,
        page: null,
        status: null,
        begin_pubdate: null,
        end_pubdate: null,
        channel_id: null
      },
      form: {
        status: null
      }
    }
  },
  mounted () {
    this.getAticle()
  },
  methods: {
    async getAticle () {
      this.isloading = true // 点击查询后控制是否加载的图标
      this.reqObj.channel_id = this.channelId
      this.reqObj.status = this.form.status
      if (this.hDate) {
        this.reqObj.begin_pubdate = this.hDate[0]
        this.reqObj.end_pubdate = this.hDate[1]
      }
      try {
        const res = await this.$http.get('/mp/v1_0/articles', {
          params: this.reqObj
        })
        console.log(res)
        this.list = res.data.data
        this.isloading = false
      } catch (err) {
        console.log(err)
        this.$message.error('查询失败')
        this.isloading = false
      }
    }, // 发送axios请求 渲染到list中
    hPageChange (val) { // 页数发生改变
      console.log('页数发生改变')
      this.reqObj.page = val
      this.getAticle()
    },
    hSizeChange (val) { // 每页数目发生改变
      console.log('每页数目发生改变')
      this.reqObj.per_page = val
      this.getAticle()
    },
    onSubmit () {
      this.getAticle()
    },
    handleEdit (index, row) {
      // 获得id
      const id = row.id.toString()
      // 跳转路由
      this.$router.push({
        path: 'addArticle',
        query: {
          id
        }
      // this.$router.push('/editArticle/'+id) name传参
      })
    },
    handleDelete (index, row) {
      this.$confirm('确认要删除吗？').then(() => {
        console.log('dataid:', row.id)
        const id = row.id.toString()
        console.log(id)
        this.$http.delete(`/mp/v1_0/articles/${id}`).then((res) => {
        // this.$http({
        //   method: 'DELETE',
        //   url: '/mp/v1_0/articles/' + id
        // }).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getAticle() // 数据在后端请求回来的 更加严谨
          // 还可以this.articles.splice(index,1)
        }).catch(err => {
          this.$message({
            message: '删除失败，只能删除草稿',
            type: 'error'
          })
          console.dir(err)
        })
      }).catch(() => {
      })
    }
  }

}
</script>

<style lang="less" scoped>

</style>
